<template>
	<view class="j-l">
		<status-bar style="background-color: #999999;"></status-bar>
		<!-- 导航 -->
		<view class="j-l-nav">
			<view class="hxf hxf-zuobian" @click="back"></view>
			<view class="j-l-r" @click="toRegister">注册</view>
		</view>
		<!-- 欢迎登录 -->
		<view class="j-l-welcome">账号密码登录</view>
		<!-- 表单 -->
		<view class="j-l-form">
			<view class="j-l-input"><input class="j-l-i" v-model="params.username" type="number" maxlength="11" placeholder="请输入手机号" /></view>
			<view class="j-l-input"><input class="j-l-i" v-model="params.password" type="password" placeholder="请输入密码" /></view>
			<u-button class="j-s-btn" shape="circle" @click="postLogin">登录</u-button>
			<view class="j-l-to">
				<text @click="toLogin">短信登录</text>
				<text class="division">|</text>
				<text @click="toForgetPassword">忘记密码</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			isCodeDis: false,
			codeBtnText: '获取验证码',
			params: {
				username: '',
				password: ''
			}
		};
	},
	methods: {
		// 登录
		postLogin() {
			// 判断手机号是否为空
			if (this.$u.test.isEmpty(this.params.username)) {
				this.$refs.uToast.show({
					title: '手机号不能为空'
				});
				return false;
			}

			// 判断手机号格式是否正确
			if (!this.$u.test.mobile(this.params.username)) {
				this.$refs.uToast.show({
					title: '手机号格式不正确'
				});
				return false;
			}

			// 判断验证码是否为空
			if (this.$u.test.isEmpty(this.params.password)) {
				this.$refs.uToast.show({
					title: '密码不能为空'
				});
				return false;
			}

			this.$u.api
				.postLoginCheck(this.params)
				.then(res => {
					uni.setStorageSync('token', res.data.token);
					uni.navigateBack({
						delta: 2
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		// toLogin() {
		// 	uni.redirectTo({
		// 		url: './login'
		// 	});
		// },
		toRegister() {
			uni.navigateTo({
				url: './register'
			});
		},
		toForgetPassword() {
			uni.navigateTo({
				url: './forget-password'
			});
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style scoped lang="scss">
.j-l {
	.j-l-nav {
		display: flex;
		padding: 65rpx 50rpx;
		align-items: center;
		justify-content: space-between;

		.hxf-zuobian {
			color: #797979;
			font-size: 55rpx;
			margin-left: -20rpx;
		}

		.j-l-r {
			color: #ed810d;
			font-size: 30rpx;
		}
	}

	.j-l-welcome {
		color: #333333;
		font-size: 50rpx;
		padding: 51rpx 50rpx;
	}

	.j-l-form {
		padding: 0 50rpx;

		.j-l-to {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 25rpx;
			
			.division{
				margin: 0 10rpx;
			}
		}

		.j-l-input {
			position: relative;

			.j-l-i {
				padding: 50rpx 0;
				border-bottom: 1rpx solid #f1f1f1;
			}

			.j-l-btn {
				position: absolute;
				top: 40rpx;
				right: 0;
				width: 194rpx;
				height: 63rpx;
				color: #121212;
				font-size: 26rpx;
				background: linear-gradient(90deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));

				&::after {
					border: 0;
				}
			}
		}

		.j-s-btn {
			color: #121212;
			margin-top: 55rpx;
			background: linear-gradient(90deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));

			&::after {
				border: 0;
			}
		}
	}
}
</style>
